<template>
	<m-layout2 title="设置" gap="24">
		<m-block gap="0 24" class="userinfo">
			<view class="flex-column ai-center mb-48" @click="Jump('/pages/mine/setAccount/setAvatar/setAvatar')">
				<m-avatar spa="50 0 20" :type="userinfo.headPicUrl" size="130"></m-avatar>
				<view class="fs24">点击头像更改</view>
			</view>
			<m-cell title="昵称" :rightText="userinfo.nicKname" @click="setNameShow = true"></m-cell>
			<m-cell v-if="userinfo.invid" title="邀请码" :rightText="userinfo.invcode" rightIcon="icon-fuzhi"
				@click="doCopy(userinfo.invcode)"></m-cell>
			<m-cell v-if="userinfo.invid" title="上级邀请人" :rightText="userinfo.invuser" rightIcon=""> </m-cell>
			<m-cell v-else title="上级邀请人" rightText="未绑定" @click="bind"> </m-cell>
			<m-cell title="注册时间" :rightText="userinfo.ctime" rightIcon=""></m-cell>
			<!-- <m-cell title="认证资料" :rightText="userinfo.idcard ? '查看' : '暂未认证'" :border="0"
				@click="Jump('/pages/mine/information/information')"></m-cell> -->
		</m-block>

		<m-block gap="0 24" class="settings" spa="24 0 0 0">
			<!-- <m-cell title="手机号" :rightText="userinfo.phone || '未设置'" rightIcon=""></m-cell> -->
			<m-cell @click="Jump('/pages/login/retrieved/retrieved?title=修改登录密码&type=2')" title="登录密码"
				rightText="修改"></m-cell>
			<m-cell @click="paymentWayFn()" title="收款方式"></m-cell>
			<!-- <m-cell @click="Jump('/pages/wallet/bankList/bankList')" title="我的银行卡" rightText="" /> -->
			<m-cell
				@click="Jump(`/pages/mine/setAccount/security/editorPay/editorPay?type=${Number(userinfo.paypassword)?2:1}`)"
				title="支付密码" :rightText="Number(userinfo.paypassword)?'修改' : '设置'"></m-cell>
			<!-- <m-cell @click="clearShow=true" title="清理缓存" :rightText="storageSize"></m-cell> -->
		</m-block>
		<m-block class="footer" style="background: unset;" slot="footer" gap="0  25 25"><m-button
				@click="exitsShow=true;" :loading="exitLoading">退出登录</m-button>
		</m-block>
		<!-- 确定退出弹框 -->
		<m-dialog title="提示" :loading="btnLoading" :showCancel="true" :isShow="exitsShow"
			@handleCancel="exitsShow = false;btnLoading = false;" @handleConfirm="exitsFn">
			<view class="ta-center ptb-48">
				确定退出吗？
			</view>
		</m-dialog>
		<!-- 修改昵称弹框 -->
		<m-dialog title="修改昵称" :loading="btnLoading" :showCancel="true" :isShow="setNameShow" @handleCancel="setNameShow = false;btnLoading = false;
			" @handleConfirm="setName">
			<view class="setName-box">
				<view class="form-Item"><input type="text" v-model="nickname" placeholder="请输入昵称" /></view>
				<view class="hint"><text>昵称长度不超过20个字符</text></view>
			</view>
		</m-dialog>
		<!-- 绑定邀请人 -->
		<m-dialog :isShow="bindShow" :showCancel="true" @handleCancel="bindShow = false" @handleConfirm="bindInvcodeFn">
			<view class="dialog-user">
				<m-block gap="26 34" radius="20" bgColor="#F6F6F6">
					<input type="text" v-model="inv" maxlength="20" style="color: #333333" placeholder="请输入邀请码/邀请人手机号"
						placeholder-class="from-item-pcs" />
				</m-block>
			</view>
		</m-dialog>
		<!-- 清除缓存 -->
		<m-dialog title="提示" :loading="btnLoading" :showCancel="true" :isShow="clearShow" @handleCancel="clearShow = false;btnLoading = false;
			" @handleConfirm="clearFn">
			<view class="ta-center ptb-48">
				您确定要清理缓存吗？
			</view>
		</m-dialog>
		<!-- 实名认证提示 -->
		<m-dialog title="提示" :loading="btnLoading" :showCancel="true" :isShow="tishiShow" @handleCancel="tishiShow = false;btnLoading = false;
			" @handleConfirm="tishiShow=false;Jump('/pages/mine/information/information');">
			<view class="ta-center ptb-48">
				需完成实名认证,立即前往认证
			</view>
		</m-dialog>
	</m-layout2>
</template>

<script>
	import { Upload, GetAppVersion } from '@/api/Ctrls.js';
	import { SetNickname, bindInvcode } from '@/api/Users.js';
	import { mapState, mapActions } from 'vuex';
	export default {
		data() {
			return {
				tishiShow: false,
				inv: '',
				bindShow: false,
				setNameShow: false,
				nickname: '',
				btnLoading: false,
				exitLoading: false,
				exitsShow: false,
				clearShow: false, //  清理缓存
				storageSize: '', // 缓存大小
			};
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo
			})
		},
		onLoad() {
			this.getStorageSize()
		},
		onShow() {
			// this.$music.playBgm({mute:false})
			// this.$store.dispatch('bgm/playBgMusic')
		},
		watch: {
			isShow(val) {
				if (!val) {
					this.name = '';
				}
			}
		},
		methods: {
			...mapActions({
				exit: 'user/exit'
			}),
			paymentWayFn() {
				console.log('this.userinfo===>', this.userinfo)
				// if (!this.userinfo.truename) return this.tishiShow = true;
				this.Jump('/pages/mine/paymentWay/paymentWay')
			},
			bind() {
				// if (this.userinfo.invcode) return
				this.bindShow = true;
			},
			// 绑定邀请人
			async bindInvcodeFn() {
				if (!this.inv) {
					return this.Toast('请输入邀请码/邀请人手机号')
				}
				const success = await bindInvcode({
					invcode: this.inv
				})
				if (success) {
					this.bindShow = false;
				}
			},
			async setName() {
				if (!this.nickname) {
					return this.Toast('请输入昵称');
				}
				if (this.nickname.length > 20) {
					return this.Toast('昵称长度不超过20个字符');
				}
				this.btnLoading = true;
				const { success } = await SetNickname({
					nickname: this.nickname,
				});
				this.btnLoading = false;
				this.setNameShow = false;
			},
			getStorageSize() {
				let that = this;
				uni.getStorageInfo({
					success(res) {
						console.log(res)
						console.log(res.keys);
						console.log(res.limitSize);
						let size = res.currentSize;
						if (size < 1024) {
							that.storageSize = size + ' B';
						} else if (size / 1024 >= 1 && size / 1024 / 1024 < 1) {
							that.storageSize = Math.floor(size / 1024 * 100) / 100 + ' KB';
						} else if (size / 1024 / 1024 >= 1) {
							that.storageSize = Math.floor(size / 1024 / 1024 * 100) / 100 + ' M';
						}
					}
				})
			},
			clearStorage() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定清除缓存吗?',
					confirmText: '立即清除',
					success(res) {
						if (res.confirm) {
							let newToken = this.Cookie.get('token');
							uni.clearStorageSync();
							//重新获取并显示清除后的缓存大小
							that.getStorageSize();
							uni.showToast({
								title: '清除成功'
							})
							this.Cookie.set('token', newToken)
						}
					}
				})
			},
			// 清理缓存
			async clearFn() {
				let that = this;
				that.btnLoading = true;
				await that.sleep(1000);

				// #ifdef APP-PLUS
				let newToken = that.Cookie.get('Token');
				let UserInfo = that.Cookie.get('UserInfo');
				plus.cache.clear(function() {
					that.btnLoading = false;
					that.clearShow = false;
					uni.clearStorageSync();
					//重新获取并显示清除后的缓存大小
					that.getStorageSize();
					uni.showToast({
						title: '清除成功'
					})
					that.Cookie.set('Token', newToken);
					that.Cookie.set('UserInfo', UserInfo)
				});
				// #endif

				// #ifdef H5
				let newToken = that.Cookie.get('Token');
				let UserInfo = that.Cookie.get('UserInfo');
				console.log('newToken===>', newToken);
				uni.clearStorageSync();
				//重新获取并显示清除后的缓存大小
				that.getStorageSize();
				uni.showToast({
					title: '清除成功'
				})
				that.btnLoading = false;
				that.clearShow = false;
				that.Cookie.set('Token', newToken);
				that.Cookie.set('UserInfo', UserInfo)
				// #endif
			},
			// 退出
			async exitsFn() {
				this.btnLoading = true;
				await this.sleep(2000);
				const success = await this.exit();
				// this.Jump('/pages/login/login');
				this.btnLoading = false;
			},
			async uploadAvatar(type) {
				try {
					const { tempFilePaths, tempFiles } = await this.chooseFile();
					const { data, success: fileStatus, msg: fileMsg } = await Upload(tempFilePaths[0]);
					if (!fileStatus) {
						this.Toast(fileMsg);
						return;
					}
					const { success, msg } = await SetNicknameHeadpic({
						nickname: this.userinfo.nickname,
						headpic: data
					});
				} catch (e) {
					console.log('uploadAvatar', e)
					this.Toast(e.message);
					//TODO handle the exception
				}
			},
			jump(type, val) {
				let editorTitle = '';
				if (type === 1) {
					if (val) {
						editorTitle = "修改手机号"
					} else {
						editorTitle = "绑定手机号"
					}
				} else if (type === 2) {
					if (val) {
						editorTitle = "修改邮箱"
					} else {
						editorTitle = "绑定邮箱"
					}
				}
				this.Jump({
					url: '/pages/mine/setAccount/security/editorAccount/editorAccount',
					params: {
						type: type,
						title: editorTitle,
						val: val
					}
				})
			},
		},
		destroyed() {
			// this.$music.desBgm()
			// this.$store.dispatch('bgm/des')
		},
	};
</script>

<style lang="scss">
	.setName-box {
		padding: 24rpx;

		.form-Item {
			background: #fff;
			border-radius: 15rpx;
			box-sizing: border-box;

			input {
				border-radius: 15rpx;
				padding: 20rpx 28rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #111;
				background: #f6f6f6;
			}
		}

		.hint {
			padding: 24rpx 0 0;
			font-size: 24rpx;
			color: var(--text_1);
		}
	}
</style>